
$(function () {

  var attendance = {};

  var detail = {
    data: {
      year: 2021,
      month: 3,
      day: 22,
      times: '',
      name: '',
      ename: '',
      flag: 0, // 0: 离职员工，1： 加班10次以上的员工，2：加班10次以下的员工
      leaveDays: 0, // 离职天数
      imgs: [], // 照片
      words: '',
      tId: '',
      currentPicIndex: 0,
      picList: [],
      startX: 0
    },
    init: function init() {
      var _this = this;

      fetch("./lib/attendance.json").then(function (res) {
        return res.json();
      }).then(function (data) {
        attendance = data["RECORDS"];
        _this.initData();
        _this.shareEvent();
      });
    },
    initData: function initData() {
      var userInfo = JSON.parse(localStorage.getItem('userInfo'));
      var record = userInfo.record;
      var latest = record.latest,
          nm = record.nm,
          imgs = record.imgs,
          nm_en = record.nm_en,
          latest_cnt = record.latest_cnt,
          leave_days = record.leave_days,
          is_leave = record.is_leave,
          t_id = record.t_id;

      var date = latest.split(' ')[0].split('/');
      this.data = {
        year: date[0],
        month: date[1],
        day: date[2],
        times: parseInt(latest_cnt),
        name: nm,
        ename: nm_en,
        flag: parseInt(is_leave) ? 0 : parseInt(latest_cnt) < 10 ? 2 : 1,
        leaveDays: parseInt(leave_days),
        imgs: imgs,
        words: '',
        tId: parseInt(t_id),
        currentPicIndex: 0,
        picList: [],
        startX: 0
      };
      this.initWords();
      this.initPicList();
    },
    initWords: function initWords() {
      var _data = this.data,
          year = _data.year,
          month = _data.month,
          day = _data.day,
          name = _data.name,
          leaveDays = _data.leaveDays,
          times = _data.times;

      switch (this.data.flag) {
        case 0:
          // 离职
          this.data.words = '<div class="mt15">\u4EB2\u7231\u7684' + name + '\u540C\u5B66\uFF1A</div>\n            <div class="mt15">\u8FD9\u662F\u4F60\u79BB\u5F00\u6613\u70B9\u5929\u4E0B\u7684\u7B2C' + leaveDays + '\u5929\uFF0C\u5F88\u60F3\u611F\u8C22\u4F60\uFF0C</div>\n            <div>\u6709\u5E78\u5E76\u80A9\u540C\u884C\uFF0C\u76F8\u4F34\u9752\u6625\u3002</div>\n            <div class="mt15">\u613F\u6211\u4EEC\u4E00\u76F4\uFF0C</div>\n            <div>\u773C\u91CC\u6709\u5149\uFF0C\u5FC3\u4E2D\u6709\u68A6\uFF0C\u52C7\u5F80\u76F4\u524D\u3002</div>';
          $('#wordWrapper').html(this.data.words);
          break;
        case 1:
          // 正常
          this.data.words = '<div><span>' + year + '</span>\u5E74<span>' + month + '</span>\u6708<span>' + day + '</span>\u65E5\u8FD9\u5929\uFF0C</div>\n            <div>\u662F\u4F60\u4E0B\u73ED\u6253\u5361\u6700\u665A\u7684\u4E00\u5929\u3002</div>\n            <div class="mt15">\u4F60\u6709<span>' + times + '</span>\u6B21\u665A\u4E0A<span>21</span>\u70B9\u79BB\u5F00\u516C\u53F8\uFF0C</div>\n            <div>\u8FD8\u6709\u66F4\u591A\u6570\u4E0D\u6E05\u7684\u5C0F\u65F6\u3002\u4F60\u5728\u4E3A\u5B9E\u73B0\u76EE\u6807\u800C\u4ED8\u51FA\u3002</div>\n            <div class="mt15">\u5F88\u60F3\u611F\u8C22\u4F60\uFF0C</div>\n            <div>\u6709\u5E78\u5E76\u80A9\u540C\u884C\uFF0C\u76F8\u4F34\u9752\u6625\u3002</div>\n            <div class="mt15">\u613F\u6211\u4EEC\u4E00\u76F4\uFF0C</div>\n            <div>\u773C\u91CC\u6709\u5149\uFF0C\u5FC3\u4E2D\u6709\u68A6\uFF0C\u52C7\u5F80\u76F4\u524D\u3002</div>';
          $('#wordWrapper').html(this.data.words);
          break;
        case 2:
          // 加班10次一下
          this.data.words = '<div>\u6709\u8DA3\u6709\u76FC\uFF0C</div>\n            <div>\u4E0D\u8D1F\u5FC3\u4E2D\u70ED\u7231\u3002</div>\n            <div>\u613F\u6211\u4EEC\u4E00\u76F4\uFF0C</div>\n            <div>\u773C\u91CC\u6709\u5149\uFF0C\u5FC3\u4E2D\u6709\u68A6\uFF0C\u52C7\u5F80\u76F4\u524D\u3002</div>';
          // $('#wordWrapper').html(this.data.words);
          break;
        default:
          break;
      }
    },
    initPicList: function initPicList() {
      var imgs = this.data.imgs;

      imgs.map(function (img, index) {
        imgs[index] = './img/thumbnail/' + img;
      });
      var tId = this.data.tId;

      var lis = '';
      tId = 1;
      var imPic = [];
      for (var i = 1; i < 4; i++) {
        imPic.push('./img/' + i + '.png');
      }
      imPic.splice(tId - 1, 1);
      imPic.unshift('./img/' + tId + '.png');
      this.data.picList = imgs.concat(imPic);
      this.data.picList.map(function (img) {
        lis += '<li><img src="' + img + '"/></li>';
      });
      $('#picList').html(lis);
      this.initCarousel();
    },
    initCarousel: function initCarousel() {
      var carouselUl = $('#picList');
      carouselUl.width(this.data.picList.length * 100 + '%');
      carouselUl.off('touchstart').on('touchstart', this.touchstartHandler);
      carouselUl.off('touchmove').on('touchmove', this.touchmoveHandler);
      carouselUl.off('touchend').on('touchend', this.touchendHandeler);
      $('#goRight').off('click').on('click', this.showNext);
      $('#goLeft').off('click').on('click', this.showPrev);
    },
    touchstartHandler: function touchstartHandler(e) {
      var that = detail;
      that.startX = e.originalEvent.targetTouches[0].pageX;
    },
    touchmoveHandler: function touchmoveHandler(e) {
      var that = detail;
      that.goTranslate(0);
      var dx = e.originalEvent.targetTouches[0].pageX - that.startX;
      that.goTranslate(dx);
    },
    touchendHandeler: function touchendHandeler(e) {
      var that = detail;
      var dx = e.originalEvent.changedTouches[0].pageX - that.startX;
      if (Math.abs(dx) > 30) {
        if (dx > 0) {
          that.showPrev();
        } else {
          that.showNext();
        }
      } else {
        // 回到上一个
        that.goTranslate(0);
      }
    },
    showNext: function showNext() {
      var that = detail;
      var currentPicIndex = that.data.currentPicIndex;

      if (currentPicIndex < that.data.picList.length - 1) {
        $('#goRight').removeClass('disabled');
        that.data.currentPicIndex += 1;
        that.goTranslate();
      } else {
        $('#goRight').addClass('disabled');
        that.goTranslate(0);
      }
    },
    showPrev: function showPrev() {
      var that = detail;
      var currentPicIndex = that.data.currentPicIndex;

      if (currentPicIndex > 0) {
        $('#goLeft').removeClass('disabled');
        that.data.currentPicIndex -= 1;
        that.goTranslate();
      } else {
        $('#goLeft').addClass('disabled');
        that.goTranslate(0);
      }
    },
    goTranslate: function goTranslate(dx) {
      var that = detail;
      var currentPicIndex = that.data.currentPicIndex;

      var $picList = $('#picList');
      var liWidth = $('#picArea').width();
      if (dx) {
        that.setTransition(0);
        $picList.css({
          transform: 'translateX(' + (-liWidth * currentPicIndex + dx) + 'px)'
        });
      } else {

        that.setTransition(1);
        $picList.css({
          transform: 'translateX(-' + liWidth * currentPicIndex + 'px)'
        });
        if (currentPicIndex === this.data.picList.length - 1) {
          $('#goRight').addClass('disabled');
        } else if (currentPicIndex === 0) {
          $('#goLeft').addClass('disabled');
        } else {
          $('#goRight,#goLeft').removeClass('disabled');
        }
      }
    },
    setTransition: function setTransition(flag) {
      var carouselUl = $('#picList');
      if (flag) {
        carouselUl.css({
          transition: 'all 0.3s ease-out'
        });
      } else {
        carouselUl.css({
          transition: 'none'
        });
      }
    },
    shareEvent: function shareEvent() {
      var that = this;
      $('#share').off('click').on('click', function () {
        that.makeSharePage();
        var element = $("#containerOuter")[0];
        var canvas = document.createElement("canvas"),
            width = element.clientWidth,
            height = element.clientHeight,
            scale = 2;

        canvas.width = width * 2; // 最终图片宽度280px的2倍，以px为单位
        canvas.height = height * 2; // 最终图片高度315px的2倍，以px为单位
        var opts = {
          scale: scale,
          canvas: canvas, // 将自定义canvas作为配置项
          useCORS: true,
          width: width, //dom 原始宽度
          height: height
        };
        html2canvas(element, opts).then(function (canvas) {
          /* 此处的base64ImgSrc就是得到的img的base64字符串，直接在页面上显示即可 */
          var base64ImgSrc = canvas.toDataURL("image/jpeg");
          $('#shareImg').attr("src", base64ImgSrc);
          $('#containerOuter').hide();
          $('#shareImgWrapper').fadeIn();
        });
      });
    },
    makeSharePage: function makeSharePage() {
      $('.btn-wrapper,#picArea').hide();
      $('#picCopy img').attr('src', this.data.picList[this.data.currentPicIndex]);
      $('.qr-wrapper,#picCopy').css({
        display: 'flex'
      });
    }
  };

  detail.init();
});